<template>
    <div>
        <!--列表-->
        <div class="list-container">
            <div class="sortList clearfix">
                <div class="center">
                    <!--banner轮播-->
                    <div class="SwiperBox" ref="SwiperBox" @mouseenter="MouseFun('in')" @mouseleave="MouseFun('out')">
                        <!-- 图片 -->
                        <div class="imgBox" :style="{ left: `-${leftVal}px`, transition: `${ition}s` }">
                            <img :src="item.imgUrl" v-for="(item, index) in imgList" :key="index" />
                            <!-- 复制第一张放到最后,以实现无缝无线循环滚动效果 -->
                            <img :src="imgList[0].imgUrl" alt="">
                        </div>
                        <!-- 左箭头按钮 -->
                        <div class="leftBtn" @click="throttle(PrevFun)">&larr;</div>
                        <!-- 右箭头按钮 -->
                        <div class="rightBtn" @click="throttle(NextFun)">&rarr;</div>
                        <!-- 下方指示点容器 -->
                        <div class="instBox">
                            <div @click="instFun(index)" v-for="(item, index) in imgList.length" :key="index"
                                :class="['inst', index == imgShow ? 'instActv' : '']">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 商城快报 -->
                <div class="right">
                    <div class="news">
                        <h4>
                            <em class="fl">11商城快报</em>
                            <span class="fr tip">更多 ></span>
                        </h4>
                        <div class="clearix"></div>
                        <ul class="news-list unstyled">
                            
                        </ul>
                    </div>
                    <ul class="lifeservices">
                        <li class=" life-item ">
                            <i class="list-item"></i>
                            <span class="service-intro">话费</span>
                        </li>
                        <li class=" life-item ">
                            <i class="list-item"></i>
                            <span class="service-intro">机票</span>
                        </li>
                        <li class=" life-item ">
                            <i class="list-item"></i>
                            <span class="service-intro">电影票</span>
                        </li>
                        <li class=" life-item ">
                            <i class="list-item"></i>
                            <span class="service-intro">游戏</span>
                        </li>
                        <li class=" life-item">
                            <i class="list-item"></i>
                            <span class="service-intro">彩票</span>
                        </li>
                        <li class=" life-item">
                            <i class="list-item"></i>
                            <span class="service-intro">加油站</span>
                        </li>
                        <li class=" life-item">
                            <i class="list-item"></i>
                            <span class="service-intro">酒店</span>
                        </li>
                        <li class=" life-item">
                            <i class="list-item"></i>
                            <span class="service-intro">火车票</span>
                        </li>
                        <li class=" life-item ">
                            <i class="list-item"></i>
                            <span class="service-intro">众筹</span>
                        </li>
                        <li class=" life-item">
                            <i class="list-item"></i>
                            <span class="service-intro">理财</span>
                        </li>
                        <li class=" life-item">
                            <i class="list-item"></i>
                            <span class="service-intro">礼品卡</span>
                        </li>
                        <li class=" life-item">
                            <i class="list-item"></i>
                            <span class="service-intro">白条</span>
                        </li>
                    </ul>
                    <div class="ads">
                        <img src="../images/home/ad1.png" />
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'listContainer',
    data() {
        return {
            imgList: [
                { imgUrl: "https://img14.360buyimg.com/pop/s590x470_jfs/t1/107362/20/24177/90602/6233decdE5627d944/b7194e538e3c8c7a.jpg" },
                { imgUrl: "https://img12.360buyimg.com/pop/s590x470_jfs/t1/204028/36/25480/101429/62f507a7Ec62b0cd3/db5984ae24ce0212.jpg" },
                { imgUrl: "https://imgcps.jd.com/ling4/100022552927/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e6/075268d0/cr/s/q.jpg" },
                { imgUrl: "https://imgcps.jd.com/ling4/100026667910/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5f3a47329785549f6bc7a6e3/d7b3695b/cr/s/q.jpg" },
                { imgUrl: "https://img30.360buyimg.com/pop/s590x470_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg" },

            ],
            leftVal: 0,  // 轮播图盒子的偏移值
            flag: true, // 用来节流防止重复点击
            start: null, // 自动执行下一张定的时器
            imgWidth: 500,  // 在这里填写你需要的图片宽度
            ition: 0.8, // 设置轮播图过度时间
            imgShow: 0, // 表示当前显示的图片索引

        }
    },
    mounted() {
        this.timer()
    },
    methods: {
        MouseFun(type) {
            type == 'in' ? clearTimeout(this.start) : this.timer()
        },
        timer() {
            this.start = setInterval(() => {
                this.NextFun()
            }, 1500)
        }, throttle(fun) {
            if (this.flag) {
                this.flag = false;
                fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
                setTimeout(() => {
                    this.flag = true;
                }, 1200); // 节流间隔时间
            }
        },
        // 上一张
        PrevFun() {
            if (this.leftVal == 0) { // 判断显示的图片 是 第一张时执行
                // this.imgList.length是指循环图片数组的图片个数
                this.ition = 0 // 将过渡时间变成0，瞬间位移到最后一张图
                this.imgShow = this.imgList.length - 1 // 将高亮小点改为最后一张图
                this.leftVal = (this.imgList.length) * this.imgWidth // 瞬间移动
                setTimeout(() => {  // 通过延时障眼法,归原过渡时间,执行真正的“上一张”函数
                    this.ition = 0.8
                    this.leftVal -= this.imgWidth
                }, this.ition * 1000)
            } else { // 判断显示的图片 不是 第一张时执行
                this.ition = 0.8
                this.leftVal -= this.imgWidth
                this.imgShow--
            }
        },
        // 下一张
        NextFun() {
            if (this.leftVal == (this.imgList.length - 1) * this.imgWidth) { // 判断显示的图片 是 最后一张时执行
                this.ition = 0.8
                this.leftVal += this.imgWidth
                this.imgShow = 0
                setTimeout(() => {
                    this.ition = 0
                    this.leftVal = 0
                }, this.ition * 1000)
            } else { // 判断显示的图片 不是 最后一张时执行
                this.ition = 0.8
                this.leftVal += this.imgWidth
                this.imgShow++
            }
        },
        // 点击小圆点
        instFun(index) {
            this.ition = 0.8
            this.leftVal = index * this.imgWidth
            this.imgShow = index
        },
    }
}
</script>

<style scoped lang="less">
.list-container {
    width: 1200px;
    margin: 0 auto;

    .sortList {
        height: 464px;
        padding-left: 210px;

        .center {
            box-sizing: border-box;
            width: 740px;
            height: 100%;
            padding: 5px;
            float: left;


            .SwiperBox {
                position: relative;
                width: 740px;
                height: 450px;
                box-sizing: border-box;
                cursor: pointer;
                overflow: hidden;

                .imgBox {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    min-width: 740px;
                    height: 450px;
                    display: flex;
                    justify-content: flex-start;

                    .img {
                        flex-shrink: 0;
                        width: 500px;
                        height: 300px;

                    }
                }

                .leftBtn,
                .rightBtn {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 30px;
                    height: 30px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: rgba(109, 109, 109, 0.445);
                    color: #fff;
                    border-radius: 50%;
                    cursor: pointer;
                    font-size: 12px;
                    font-weight: 500;
                }

                .leftBtn {
                    left: 10px;
                }

                .rightBtn {
                    right: 10px;
                }

                .instBox {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 10px;
                    display: flex;

                    /* 小圆点 */
                    .inst {
                        width: 10px;
                        height: 10px;
                        border: 1px solid #ccc;
                        margin-right: 8px;
                        background: #fff;
                        border-radius: 50%;
                        cursor: pointer;
                    }

                    .inst:last-child {
                        margin-right: 0px;
                    }

                    .instActv {
                        border: 1px solid #ff0000;
                        background: #ff0000;
                    }
                }
            }
        }

        .right {
            float: left;
            width: 250px;

            .news {
                border: 1px solid #e4e4e4;
                margin-top: 5px;

                h4 {
                    border-bottom: 1px solid #e4e4e4;
                    padding: 5px 10px;
                    margin: 5px 5px 0;
                    line-height: 22px;
                    overflow: hidden;
                    font-size: 14px;

                    .fl {
                        float: left;
                    }

                    .fr {
                        float: right;
                        font-size: 12px;
                        font-weight: 400;
                    }
                }

                .news-list {
                    padding: 5px 15px;
                    line-height: 26px;

                    .bold {
                        font-weight: 700;
                    }
                }
            }

            .lifeservices {
                border-right: 1px solid #e4e4e4;
                overflow: hidden;
                display: flex;
                flex-wrap: wrap;

                .life-item {
                    border-left: 1px solid #e4e4e4;
                    border-bottom: 1px solid #e4e4e4;
                    margin-right: -1px;
                    height: 64px;
                    text-align: center;
                    position: relative;
                    cursor: pointer;
                    width: 25%;

                    .list-item {
                        background-image: url(../images/home/icons.png);
                        width: 61px;
                        height: 40px;
                        display: block;
                    }

                    .service-intro {
                        line-height: 22px;
                        width: 60px;
                        display: block;
                    }

                    &:nth-child(1) {
                        .list-item {
                            background-position: 0px -5px;
                        }
                    }

                    &:nth-child(2) {
                        .list-item {
                            background-position: -62px -5px;
                        }
                    }

                    &:nth-child(3) {
                        .list-item {
                            background-position: -126px -5px;
                        }
                    }

                    &:nth-child(4) {
                        .list-item {
                            background-position: -190px -5px;
                        }
                    }

                    &:nth-child(5) {
                        .list-item {
                            background-position: 0px -76px;
                        }
                    }

                    &:nth-child(6) {
                        .list-item {
                            background-position: -62px -76px;
                        }
                    }

                    &:nth-child(7) {
                        .list-item {
                            background-position: -126px -76px;
                        }
                    }

                    &:nth-child(8) {
                        .list-item {
                            background-position: -190px -76px;
                        }
                    }

                    &:nth-child(9) {
                        .list-item {
                            background-position: 0px -146px;
                        }
                    }

                    &:nth-child(10) {
                        .list-item {
                            background-position: -62px -146px;
                        }
                    }

                    &:nth-child(11) {
                        .list-item {
                            background-position: -126px -146px;
                        }
                    }

                    &:nth-child(12) {
                        .list-item {
                            background-position: -190px -146px;
                        }
                    }
                }
            }

            .ads {
                margin-top: 5px;

                img {
                    opacity: 0.8;
                    transition: all 400ms;

                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }
    }
}
</style>